<template>
  <div class="top">
    <van-nav-bar title="商品列表" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="goods-list">
    <div class="goods-item" v-for="item in GoodsList" :key="item.id">
      <router-link :to="{ name: 'detailed', params: { id: item.id } }">
        <van-image width="150" height="150" :src="item.picture" />
        <h1 class="title">
          {{ item.name }}<span class="small">{{ item.spec }}</span>
        </h1>
        <p class="info">
          <span class="price">¥{{ item.price }}</span>
          <span class="sell">剩余 {{ item.stock }} 件</span>
        </p>
      </router-link>
    </div>
    <van-button plain hairline type="primary" :disabled="is_last" v-if="GoodsList.length" size="large" @click="getMore" >
      加载更多</van-button>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { getGoodsList } from "../api";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const GoodsList = ref([]);
const is_last = ref(false);
let last_id = "0";

const router = useRouter();
const onClickLeft = () => {
  router.back();
};

const props = defineProps({
  category_id: String,
});

onMounted(() => {
  if (props.category_id) {
    loadGoodList();
  }
});

watch(
  () => props.category_id,
  (newVal) => {
    if (newVal) {
      loadGoodList();
    }
  }
);

const loadGoodList = async () => {
  const params = {
    last_id,
    category_id: props.category_id,
    pagesize: 4,
  };
  try {
    const data = await getGoodsList(params);
    if (data.length > 0) {
      GoodsList.value = GoodsList.value.concat(data);
      last_id = data[data.length - 1].id;
    } else if (GoodsList.value.length > 0) {
      showToast({
        message: "已经到达底部",
        type: "fail",
      });
      is_last.value = true;
    } else {
      showToast({
        message: "列表为空",
        type: "fail",
      });
    }
  } catch (error) {
    showToast({
      message: "加载失败",
      type: "fail",
    });
  }
};

const getMore = () => {
  loadGoodList();
};
</script>

<style scoped>
.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  height: 100%;
  overflow-y: scroll;
}

.top .van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}


.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
}

 .goods-item {
  width: calc(50% - 12px);
  margin: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  border: 1px solid #efeff4;
  padding: 50px 10px 10px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

 .title {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin: 15px 0 10px;
}

 .small {
  font-size: 14px;
  color: #666;
}

 .info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 0 5px;
}

 .price {
  color: #e4393c;
  font-weight: bold;
  font-size: 18px;
}

 .sell {
  font-size: 13px;
  color: #999;
}

</style>